<template>
  <div class="shareSetting">
    <div class="tableList">
      <TableList
        :columns="columns"
        :data="data"
        :page="page"
        :total="pageTotal*pageNum"
        :pageNum="pageNum"
        newOne
        tableTitle="分享列表"
        @newOneFn="newOne"
        @changePage="changePage"
      ></TableList>
    </div>
    <Modal v-model="create" title="编辑分享" @on-ok="confirmCreate" @on-cancel="cancel">
      <Form
        :model="formItem"
        :label-width="120"
        style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 400px;"
        class="searchForm"
      >
        <FormItem label="分享标题">
          <Input v-model="formItem.title" placeholder="请输入域名" style="width:300px"></Input>
          <br />
          <!-- <span>必须以http://或者https://开头（例如：http://kanjia.tjicc.cn）</span> -->
        </FormItem>
        <FormItem label="H5分享内容">
          <Input v-model="formItem.h5_content" placeholder="请输入域名" style="width:300px"></Input>
          <br />
        </FormItem>
        <FormItem label="H5分享图标">
          <div v-if="formItem.h5_icon" class="brand-item-logo disFlex">
            <img :src="formItem.h5_icon" />
            <upload :multiple="true" :spread="true" @confirmUpload="changeIcon"></upload>
          </div>
          <div
            v-else
            class="brand-item-environment new-add-brand-item-environment disFlex Flex-middle Flex-center"
            style="margin: 0;"
          >
            <span>+ 添加图片</span>
            <upload :multiple="true" :spread="true" @confirmUpload="changeIcon"></upload>
          </div>
        </FormItem>
        <br />
        <FormItem label="小程序分享图片">
          <div v-if="formItem.weapp_img" class="brand-item-logo disFlex">
            <img :src="formItem.weapp_img" />
            <upload :multiple="true" :spread="true" @confirmUpload="changeImg"></upload>
          </div>
          <div
            v-else
            class="brand-item-environment new-add-brand-item-environment disFlex Flex-middle Flex-center"
            style="margin: 0;"
          >
            <span>+ 添加图片</span>
            <upload :multiple="true" :spread="true" @confirmUpload="changeImg"></upload>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import upload from "base/upload/upload";
import TableList from "@/components/consumer/tableList";
import { ShareSettingUpdate, ShareSetting } from "api/recuit/setting";

export default {
  name: "shareSetting",
  data() {
    return {
      formItem: {
        title: "",
        h5_content: "",
        h5_icon: "",
        weapp_img: ""
      },
      domainId: "",
      qrcode: "",
      columns: [
        {
          title: "分享页面",
          key: "name",
          width: 200
        },
        {
          title: "分享标题",
          key: "title",
          width: 280,
          render: (h, params) => {
            return h("span", params.row.title || "默认");
          }
        },
        {
          title: "H5分享内容",
          key: "h5_content",
          width: 280,
          render: (h, params) => {
            return h("span", params.row.h5_content || "默认");
          }
        },
        {
          title: "H5分享图标",
          key: "h5_icon",
          width: 250,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              [
                params.row.h5_icon
                  ? h("img", {
                      attrs: {
                        src: params.row.h5_icon
                      },
                      style: {
                        padding: "2px",
                        width: "150px",
                        height: "120px"
                      },
                      on: {
                        click: () => {
                          this.showCode = true;
                          this.qrcode = `https://api.qrserver.com/v1/create-qr-code/?data=http://${params.row.domain}&amp;size=100x100`;
                        }
                      }
                    })
                  : h("span", "默认")
              ]
            );
          }
        },
        {
          title: "小程序分享图片",
          key: "weapp_img",
          width: 250,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              [
                params.row.weapp_img
                  ? h("img", {
                      attrs: {
                        src: params.row.weapp_img
                      },
                      style: {
                        padding: "2px",
                        width: "150px",
                        height: "120px"
                      },
                      on: {
                        click: () => {
                          this.showCode = true;
                          this.qrcode = `https://api.qrserver.com/v1/create-qr-code/?data=http://${params.row.domain}&amp;size=100x100`;
                        }
                      }
                    })
                  : h("span", "默认")
              ]
            );
          }
        },
        {
          title: "操作",
          key: "action",
          width: 300,
          align: "center",
          render: (h, params) => {
            let element = [];
            element = [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "middle"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.newOne(params.row.id);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "middle"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.reset(params.row.id);
                    }
                  }
                },
                "重置"
              )
            ];
            return h("div", element);
          }
        }
      ],

      data: initList,
      page: 0,
      pageNum: 10,
      companySum: 0, //企业总数
      pageTotal: 0, //页面总数
      create: false,
      showCode: false
    };
  },
  components: { TableList, upload },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    //获取域名列表
    getData() {
      let page = this.page;
      let pageNum = this.pageNum;
      let dataList = new Object();
      this.data = [];
      dataList.page = ++page;
      dataList.pageNum = pageNum;
      ShareSetting(dataList)
        .then(res => {
          let { custom_transmit_card } = res;
          if (custom_transmit_card) {
            custom_transmit_card = JSON.parse(custom_transmit_card);
            this.data = custom_transmit_card;
            this.pageTotal = page;
            this.page = page;
          } else {
            this.data = initList;
            this.page = 1;
            this.pageTotal = 1;
          }
          this.$Loading.finish();
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    newOne(id) {
      if (id) {
        this.chooseId = id;
        for (let i = 0; i < this.data.length; i++) {
          if (this.data[i].id == id) {
            this.formItem = this.data[i];
          }
        }
      }
      this.create = true;
    },
    confirmCreate() {
      this.$Loading.start();
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].id == this.chooseId) {
          this.data[i] = this.formItem;
        }
      }
      ShareSettingUpdate({
        custom_transmit_card: JSON.stringify(this.data)
      })
        .then(result => {
          this.$Message.success("更新成功");
        })
        .catch(err => {
          this.$Message.error(err);
        });
      this.$Loading.finish();
    },
    reset(id) {
      let temp = {};
      for (let i = 0; i < initList.length; i++) {
        if (initList[i].id == id) {
          temp = initList[i];
        }
      }
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].id == id) {
          this.data[i] = temp;
        }
      }
      ShareSettingUpdate({
        custom_transmit_card: JSON.stringify(this.data)
      })
        .then(result => {
          this.$Message.success("重置成功");
          this.page = 0;
          this.getData();
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    changeIcon(_url) {
      this.formItem.h5_icon = _url[0];
    },
    changeImg(_url) {
      this.formItem.weapp_img = _url[0];
    }
  }
};

let initList = [
  {
    id: 1,
    page: "comsumerIndex",
    name: "首页",
    title: "",
    h5_content: "",
    h5_icon: "",
    weapp_img: ""
  },
  {
    id: 2,
    page: "jobDetail",
    name: "职位详情",
    title: "",
    h5_content: "",
    h5_icon: "",
    weapp_img: ""
  },
  {
    id: 3,
    page: "brandInfo",
    name: "商家主页",
    title: "",
    h5_content: "",
    h5_icon: "",
    weapp_img: ""
  },
  {
    id: 4,
    page: "redBag",
    name: "悬赏红包",
    title: "",
    h5_content: "",
    h5_icon: "",
    weapp_img: ""
  }
];
</script>

<style scoped lang="less">
.brand-item-logo {
  width: 125px;
  height: 100px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  top: 0;
  left: 0;

  img {
    width: 100%;
  }
}
.brand-item-environment {
  width: 214px;
  height: 120px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 15px;
  overflow: hidden;
  margin-top: 10px;

  &:nth-of-type(2n + 1) {
    margin-left: 0;
  }

  img {
    width: 100%;
    height: 100%;
    float: left;
  }

  & > .close {
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #fff;
  }
}

.old-brand-item-environment {
  margin-left: 0;
  cursor: pointer;
}

.new-add-brand-item-environment {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 15px;
  overflow: hidden;
  margin-left: 15px;
  cursor: pointer;
  width: 125px;
  height: 100px;
  margin-top: 29px;

  &:nth-of-type(2n + 1) {
    margin-left: 0;
  }

  img {
    width: 100%;
    height: 100%;
    float: left;
  }

  & > .close {
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #fff;
  }
}
.shareSetting {
  width: 100%;
  height: 100%;
  padding: 2%;
  background: white;

  .codeImg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tableList {
    margin-top: 30px;
  }
  .item-title {
    margin-bottom: 20px;
    padding: 8px 16px;
    font-weight: bolder;
    background-color: #f5f5f5;
    color: #333;
  }
  .introdution {
    width: 80%;
    background-color: #f5f5f5;
    padding: 2%;
    line-height: 25px;
  }
}
.select-wrapper {
  width: 128px;
  margin-right: 15px;
}
</style>
